<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>随机获取一条笑话</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
      .mybtn {
        margin-top: 50px;
        margin-left: 50px;
        font-size: 20px;
        height: 30px;
        line-height: 30px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <p>{{ joke }}</p>
      <input type="button" value="获取笑话" class="mybtn" @click="getJoke" />
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        joke: '每次点击可以获取一个随机的笑话',
      },
      created() {},
      methods: {
        getJoke() {
          var that = this
          axios.get('https://autumnfish.cn/api/joke').then(
            function(res) {
              console.log(res.data)
              that.joke = res.data
            },
            function(err) {
              console.log(err)
            }
          )
        },
        isWeChat() {
          var ua = navigator.userAgent.toLowerCase()
          if (ua.match(/MicroMessenger/i) == 'micromessenger') {
            console.log(1)
            return true
          } else {
            console.log(2)
            return false
          }
        },
        isIOS() {
          if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
            return true
          }
        },
      },
    })
  </script>
</html>
